<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>展厅列表</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- 卡片视图区域 -->
    <el-card>
      <el-row class="query">
        <el-col :span="24">
          <el-input placeholder="请输入客户名查询"
            v-model="searchData.customer"
            clearable style="width: 200px;">
          </el-input>
          <el-input placeholder="请输入规格查询"
            v-model="searchData.model"
            clearable style="margin-left: 10px;width: 200px;">
          </el-input>
        </el-col>
      </el-row>
      <el-row class="query">
        <el-col :span="24">
          <el-select v-model="searchData.states" placeholder="请选择状态" clearable popper-class="dropdownbox" filterable style="width: 200px;">
            <el-option v-for="element in statesList"
              :label="element.label"
              :value="element.value">
              <span>{{ element.label }}</span>
            </el-option>
          </el-select>
          <el-button type="primary" @click="search" style="margin-left: 10px;">查询</el-button>
          <el-button @click="clear" style="margin-left: 10px;">重置</el-button>
        </el-col>
      </el-row>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="1.5">
          <el-button type="success" @click="goAddPage()" v-if="role == 1 || role == 3">添加订单</el-button>
        </el-col>
      </el-row>
      <!-- 列表区域 -->
      <el-table
        border
        row-key="index"
        lazy
        v-loading="loading"
        :load="load"
        :data="list"
        :default-expand-all="expandAll"
        :row-class-name="tableRowClassName"
        :cell-style="{background: 'revert'}"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="日期" prop="date" min-width="160" align="center" fixed="left"></el-table-column>
        <el-table-column label="ID" prop="oid" width="65" align="center" fixed="left"></el-table-column>
        <el-table-column label="客户名称" prop="customer" align="center" min-width="165" fixed="left">
          <template slot-scope="scope" v-if="scope.row.customer">
            <div>
              {{scope.row.customer}}
            </div>
            <el-button size="mini" type="warning" @click="handlePrint(scope.$index, scope.row.print)">打印</el-button>
          </template>
        </el-table-column>
        <el-table-column label="新旧" prop="new" width="50" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.new ? '新' : '旧'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="类别" prop="product" align="center" min-width="85"></el-table-column>
        <el-table-column label="产品名称" prop="productn" align="center" min-width="160"></el-table-column>
        <el-table-column label="规格" prop="model" align="center" min-width="160"></el-table-column>
        <el-table-column label="成本" prop="cost" min-width="110" align="center" v-if="role == 1 || role == 3"></el-table-column>
        <el-table-column label="数量" prop="amoumt" align="center" min-width="100"></el-table-column>
        <el-table-column label="状态" prop="states" width="85" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.states == '0'">已返仓</span>
            <span v-if="scope.row.states == '1'">在展</span>
            <span v-if="scope.row.states == '2'">已购买</span>
            <span v-if="scope.row.states == '3'">待定</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="other" min-width="150" align="center"></el-table-column>
        <el-table-column label="回仓时间" prop="backtime" width="125" align="center"></el-table-column>
        <el-table-column label="操作" width="220" align="center" fixed="right">
          <template slot-scope="scope">
            <div v-if="scope.row.ischild">
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="(role == 1 || role == 3) && scope.row.states !== 0 && scope.row.states !== 2">编辑</el-button>
              <el-button size="mini" type="info" @click="returnHouse(scope.row.id)" v-if="(role == 1 || role == 3) && scope.row.states == 1 || scope.row.states == 3">返仓</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="(role == 1 || role == 3) && scope.row.states==1 && scope.row.states==1">删除</el-button>
            </div>
            <div v-else>
              <div>
                <el-button size="mini" type="success" @click="handleSave(scope.$index, scope.row.add)" v-if="role == 1 || role == 3">添加</el-button>
                <el-button size="mini" type="info" @click="returnHouse(scope.row.id)" v-if="(role == 1 || role == 3) && scope.row.states == 1 || scope.row.states == 3">返仓</el-button>
              </div>
              <div style="margin-top: 2px;">
                <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="(role == 1 || role == 3) && scope.row.states !== 0 && scope.row.states !== 2">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="(role == 1 || role == 3) && scope.row.states==1 && scope.row.states==1">删除</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.currPage"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.totalRecord">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      role: '',
      list: [],
      loading: true,
      expandAll: false,
      pager: {
        currPage: 1,
        pageSize: 10,
        totalRecord: 0
      },
      searchData: {
        customer: '',
        model: '',
        states: ''
      },
      statesList: [
        {
          value: 0,
          label: '回仓'
        },
        {
          value: 1,
          label: '在展'
        },
        {
          value: 2,
          label: '购买'
        },
        {
          value: 3,
          label: '待定'
        }
      ]
    }
  },
  created() {
    this.role = parseInt(localStorage.getItem('role'))
    if (this.role === 3 || this.role === 5) {
      this.expandAll = true
      this.pager.pageSize = 3
    }
    this.getShowPage()
  },
  methods: {
    // 获取列表
    async getShowPage() {
      let params = {
        page: this.pager.currPage,
        pageSize: this.pager.pageSize,
        customer: this.searchData.customer,
        model: this.searchData.model,
        states: this.searchData.states
      }
      const { data: result } = await this.$http.get('/show', { params: params })
      this.loading = false
      if (result.status !== 200) return this.$message.error(result.msg)
      this.list = result.data
      this.pager = result.pager
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve(tree.children)
      }, 50)
    },
    // 新增按钮
    goAddPage() {
      this.$router.push('/show-save')
    },
    // 打印
    handlePrint(index, row) {
      this.$router.push({
        name: 'print-show',
        params: { showList: row }
      })
    },
    // 新增
    handleSave(index, row) {
      this.$router.push({
        name: 'show-save',
        params: { showList: row }
      })
    },
    // 编辑
    handleEdit(index, row) {
      this.$router.push({
        name: 'show-update',
        params: { id: row.id }
      })
    },
    // 删除
    async handleDelete(index, row) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return
      }
      const { data: result } = await this.$http.delete('show/' + row.id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.$message.success('删除成功！')
      this.list = []
      this.getShowPage()
    },
    // 搜索
    search() {
      this.pager.currPage = 1
      this.list = []
      this.getShowPage()
    },
    // 清空
    clear() {
      this.searchData = {
        customer: '',
        model: '',
        states: ''
      }
      this.list = []
      this.getShowPage()
    },
    // 行颜色
    tableRowClassName({ row, rowIndex }) {
      return row.color
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize
      this.getShowPage()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(currPage) {
      this.pager.currPage = currPage
      this.getShowPage()
    },
    // 返仓
    async returnHouse(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('是否确认返仓?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return
      }
      const { data: result } = await this.$http.put('show-return/' + id)
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.$message.success('返仓成功！')
      this.list = []
      this.getShowPage()
    }
  }
}
</script>
<style lang="less">
.query {
  margin-bottom: 20px;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
// .el-table .blue {
//   background: #eef3fb;
// }
// .el-table .green {
//   background: #f0f9eb;
// }
</style>
